﻿/**
 * Created by Administrator on 2017/9/6.
 */


//Vertical and horizontal
/**
 * 
 * http://www.jq22.com/jquery-info17348 地址
.scrollBar();//这是最基本的初始化方法，滚动条为默认的样式
.scrollBar({
    barWidth: 10, //滚动条的宽度(这里根据需要写数值即可，不设置是10,即默认10px)
    position: "x,y", //写“x”代表只出水平滚动条，写“y”表示只出垂直滚动条，写“x,y”则出水平和垂直滚动条（只有在内容超出容器时才出现滚动条）
    wheelDis: 15 //滚轮滚动一次向下或向上滚动的距离，默认是15，可根据需要修改数值
})
 */

; (function ($) {
    $.fn.extend({
        "scrollBar": function (options) {
            var settings = {
                barWidth: 5,
                position: "x,y",
                wheelDis: 15

            };

            options = $.extend(settings, options);

            var horizontalDiv = '<div class="zl-scrollBarBox" style="width:100%;left:0;height:' + settings.barWidth + 'px;bottom:0;">' +
                '<div class="zl-scrollBar zl-horizontalBar" style="height:' + settings.barWidth + 'px;border-radius:' + settings.barWidth / 2 + 'px;"></div>' +
                '</div>';
            var verticalDiv = '<div class="zl-scrollBarBox" style="height:100%;top:0;width:' + settings.barWidth + 'px;right:0;">' +
                '<div class="zl-scrollBar zl-verticalBar" style="width:' + settings.barWidth + 'px;border-radius:' + settings.barWidth / 2 + 'px;"></div>' +
                '</div>';

            var T = this;

            /**
             * 灏嗘瘡涓猟iv鐨刾adding鍊间繚瀛樺埌鑷畾涔夊睘鎬т腑
             */

            T.each(function () {

                $(this).attr("paddingR", $(this).css("padding-right")).attr("paddingB", $(this).css("padding-bottom"));

            });
            /**
             *
             *鍒涘缓婊氬姩鏉＄殑鍑芥暟
             */
            function creatScrollBar(obj) {

                var This = $(obj).get(0);//杞寲涓篔S瀵硅薄锛屽鍔犺繍琛屾晥鐜�

                var paddingR = parseFloat($(obj).attr("paddingR"));
                var paddingB = parseFloat($(obj).attr("paddingB"));

                $(obj).css({
                    "padding-right": paddingR + "px",
                    "padding-bottom": paddingB + "px",
                    "overflow": "hidden"
                });

                //鑾峰彇鍐呭鐨勬€婚珮搴﹀拰鎬诲搴�


                if (!($(obj).children().hasClass("zl-scrollContentDiv"))) {
                    $(obj).wrapInner('<div class="zl-scrollContentDiv"></div>');
                };

                if ($(obj).css("position") == "static") {
                    $(obj).css({ "position": "relative" });
                };

                var scrollContentDiv = $(obj).find(".zl-scrollContentDiv");

                var scrollH = scrollContentDiv[0].scrollHeight;
                var scrollW = scrollContentDiv[0].scrollWidth;

                var innerH = scrollContentDiv.height();
                var innerW = scrollContentDiv.width();
                var outerH = $(obj).innerHeight();
                var outerW = $(obj).innerWidth();

                function addVerticalBar(a) {

                    This.style.paddingRight = paddingR + settings.barWidth + 'px';

                    innerH = $(a).height();

                    var barHeight = outerH * (innerH / scrollH);

                    $(a).find(".zl-scrollBarBox").remove().end().append(verticalDiv).find(".zl-verticalBar").height(barHeight);

                };
                function addHorizontalBar(a) {

                    This.style.paddingBottom = paddingB + settings.barWidth + 'px';
                    innerW = $(a).width();

                    var barWidth = outerW * (innerW / scrollW);

                    $(a).find(".zl-scrollBarBox").remove().end().append(horizontalDiv).find(".zl-horizontalBar").width(barWidth);

                };

                switch (settings.position) {

                    case "x,y":

                        if (scrollH > innerH && scrollW > innerW) {
                            This.style.paddingRight = paddingR + settings.barWidth + 'px';
                            innerH = $(obj).height();
                            outerH = $(obj).innerHeight();

                            var barHeight = (outerH - settings.barWidth) * ((innerH - settings.barWidth) / scrollH);
                            if (!($(obj).find(".zl-verticalBar").length)) {
                                $(obj).append(verticalDiv);
                            };

                            $(obj).find(".zl-verticalBar").height(barHeight).parent().height(outerH - settings.barWidth);


                            This.style.paddingBottom = paddingB + settings.barWidth + 'px';
                            innerW = $(obj).width();

                            var barWidth = (outerW - settings.barWidth) * ((innerW - settings.barWidth) / scrollW);

                            if (!($(obj).find(".zl-horizontalBar").length)) {
                                $(obj).append(horizontalDiv);
                            };
                            $(obj).find(".zl-horizontalBar").width(barWidth).parent().width(outerW)
                                .css({
                                    "padding-right": settings.barWidth + "px",
                                    "box-sizing": "border-box"
                                });

                        } else if (scrollH > innerH) {

                            addVerticalBar(obj);


                        } else if (scrollW > innerW) {

                            addHorizontalBar(obj);

                        } else {
                            $(obj).find(".zl-scrollBarBox").remove();
                        }
                        break;

                    case "x":

                        if (scrollW > innerW) {

                            addHorizontalBar(obj);

                        } else {
                            $(obj).find(".zl-scrollBarBox").remove();
                        }
                        break;

                    case "y":

                        if (scrollH > innerH) {

                            addVerticalBar(obj);

                        } else {
                            $(obj).find(".zl-scrollBarBox").remove();
                        }

                        break;
                };


            }

            /**
             * 寰幆缁欐瘡涓€涓狣iv娣诲姞
             */
            function recycleThis() {

                T.each(function () {

                    creatScrollBar(this);

                });
            };

            recycleThis();//鎵ц寰幆

            /**
             *鍒涘缓鐩戝惉div鍐呭鍙樺寲鐨勫畾鏃跺櫒
             */

            function creatTimer(obj, oldWidth, oldHeight, oldInnerWidth, oldInnerHeight, timer) {

                timer = setInterval(function () {

                    var newWidth = null;
                    var newHeight = null;
                    var newInnerWidth = null;
                    var newInnerHeight = null;
                    var topDiv = null;
                    var leftDiv = null;
                    var topBar = null;
                    var leftBar = null;
                    var scrollContentDiv = $(obj).find(".zl-scrollContentDiv");

                    if (scrollContentDiv.length) {
                        newWidth = scrollContentDiv[0].scrollWidth;
                        newHeight = scrollContentDiv[0].scrollHeight;

                        newInnerWidth = scrollContentDiv.width();
                        newInnerHeight = scrollContentDiv.height();
                    } else {
                        newWidth = $(obj)[0].scrollWidth - parseFloat($(obj).css("padding-left"));
                        newHeight = $(obj)[0].scrollHeight - parseFloat($(obj).css("padding-top"));
                        newInnerWidth = $(obj).width();
                        newInnerHeight = $(obj).height();

                    };

                    if (newWidth != oldWidth || newHeight != oldHeight || newInnerWidth != oldInnerWidth || newInnerHeight != oldInnerHeight) {

                        //璁板綍鏇存柊婊氬姩鏉￠暱鐭墠鐨勪綅缃�
                        if (scrollContentDiv.length) {
                            topDiv = parseFloat(scrollContentDiv.css("top"));
                            leftDiv = parseFloat(scrollContentDiv.css("left"));
                        };
                        if ($(obj).find(".zl-verticalBar").length) {
                            topBar = parseFloat($(obj).find(".zl-verticalBar").css("top"));
                        };
                        if ($(obj).find(".zl-horizontalBar").length) {
                            leftBar = parseFloat($(obj).find(".zl-horizontalBar").css("left"));
                        };
                        //鏇存柊婊氬姩鏉￠暱鐭垨鏈夋棤
                        creatScrollBar(obj);

                        if ($(obj).find(".zl-scrollBarBox").length) {
                            if (topDiv) {
                                var maxTopBox = scrollContentDiv[0].scrollHeight - $(obj).height();
                                var maxLeftBox = scrollContentDiv[0].scrollWidth - $(obj).width();
                                if (-leftDiv > maxLeftBox) {
                                    leftDiv = -maxLeftBox;
                                }
                                if (-topDiv > maxTopBox) {
                                    topDiv = -maxTopBox;
                                }
                                scrollContentDiv.css({
                                    "left": leftDiv + 'px',
                                    "top": topDiv + 'px'
                                });
                            };
                            //灏嗗師鏉ョ殑浣嶇疆璧嬪€肩粰鐜板湪鐨勬粴鍔ㄦ潯
                            if (topBar && $(obj).find(".zl-verticalBar").length) {
                                var verticalBar = $(obj).find(".zl-verticalBar");
                                var maxTop = verticalBar.parent().height() - verticalBar.height();

                                if (topBar > maxTop) {
                                    topBar = maxTop;
                                }
                                verticalBar.css("top", topBar + 'px');
                            };
                            if (leftBar && $(obj).find(".zl-horizontalBar").length) {
                                var horizontalBar = $(obj).find(".zl-verticalBar");
                                var maxLeft = horizontalBar.parent().width() - horizontalBar.width();

                                if (leftBar > maxLeft) {
                                    leftBar = maxLeft;
                                }

                                $(obj).find(".zl-horizontalBar").css("left", leftBar + 'px');
                            };
                        }

                        oldWidth = newWidth;
                        oldHeight = newHeight;

                        oldInnerHeight = newInnerHeight;
                        oldInnerWidth = newInnerWidth;
                    }

                }, 100);


            }

            /**
             * 閫氳繃寰幆缁欐瘡涓€涓猟iv娣诲姞涓婄洃鍚唴瀹瑰彉鍖栫殑瀹氭椂鍣�
             */
            function addTimer() {
                $.each(T, function (k, v) {

                    var obj = v;
                    var timer = "timer" + k;
                    var oldWidth = null;
                    var oldHeight = null;
                    var oldInnerWidth = null;
                    var oldInnerHeight = null;

                    if ($(v).find(".zl-scrollContentDiv").length) {
                        oldWidth = $(v).find(".zl-scrollContentDiv")[0].scrollWidth;
                        oldHeight = $(v).find(".zl-scrollContentDiv")[0].scrollHeight;
                        oldInnerWidth = $(v).find(".zl-scrollContentDiv").width();
                        oldInnerHeight = $(v).find(".zl-scrollContentDiv").height();

                    } else {
                        oldWidth = $(obj)[0].scrollWidth - parseFloat($(obj).css("padding-left"));
                        oldHeight = $(obj)[0].scrollHeight - parseFloat($(obj).css("padding-top"));

                        oldInnerWidth = $(obj).width();
                        oldInnerHeight = $(obj).height();
                    }
                    creatTimer(obj, oldWidth, oldHeight, oldInnerWidth, oldInnerHeight, timer);
                });
            }
            addTimer();
            function clearTimer() {
                $.each(T, function (index, item) {
                    var timer = "timer" + index;
                    clearInterval(timer);
                });
            };
            /**
             * 婊氬姩鏉℃嫋鎷芥晥鏋�
             */
            this.on("mousedown", ".zl-scrollBar", function (ev) {

                clearTimer();//娓呴櫎瀹氭椂鍣�

                var direction = null;

                if ($(this).hasClass("zl-verticalBar")) {

                    direction = "0";

                } else if ($(this).hasClass("zl-horizontalBar")) {

                    direction = "1";

                }

                var This = $(this).get(0);

                var height = $(this).parent().height() - $(this).height();
                var width = $(this).parent().width() - $(this).width();

                var contentDiv = $(this).parent().parent().find(".zl-scrollContentDiv").get(0);

                var scrollH = contentDiv.scrollHeight;
                var innerH = $(this).parent().parent().height();

                var scrollW = contentDiv.scrollWidth;
                var innerW = $(this).parent().parent().width();


                var ev = ev || event;

                var disY = ev.clientY - This.offsetTop;
                var disX = ev.clientX - This.offsetLeft;

                var topCount = null;
                var leftCount = null;

                switch (direction) {

                    case "0":

                        document.onmousemove = function (ev) {

                            var ev = ev || event;

                            if (ev.clientY - disY <= 0) {

                                topCount = 0;

                            } else

                                if ((ev.clientY - disY) >= height) {

                                    topCount = height;

                                } else {

                                    topCount = ev.clientY - disY;

                                }

                            This.style.top = topCount + "px";

                            contentDiv.style.top = -(topCount * (scrollH - innerH) / height) + 'px';

                        };

                        break;

                    case "1":

                        document.onmousemove = function (ev) {

                            var ev = ev || event;

                            if (ev.clientX - disX <= 0) {

                                leftCount = 0;

                            } else

                                if ((ev.clientX - disX) >= width) {

                                    leftCount = width;

                                } else {

                                    leftCount = ev.clientX - disX;

                                }

                            This.style.left = leftCount + "px";

                            contentDiv.style.left = -(leftCount * (scrollW - innerW) / width) + 'px';

                        };

                        break;

                }

                document.onmouseup = function () {

                    document.onmousemove = null;
                    document.onmouseup = null;

                    addTimer();//娣诲姞瀹氭椂鍣�

                };

                return false;
            });

            /**
             *榧犳爣婊氳疆鏁堟灉
             */

            function fn(ev, a) {
                if (a.find(".zl-verticalBar").length) {

                    var b = true;
                    var height = a.find(".zl-scrollBarBox").height() - a.find(".zl-scrollBar").height();
                    var contentDiv = a.find(".zl-scrollContentDiv").get(0);
                    var scrollH = contentDiv.scrollHeight;
                    var innerH = a.height();

                    if (ev.wheelDelta) {
                        b = ev.wheelDelta > 0 ? true : false;
                    } else {
                        b = ev.detail < 0 ? true : false;
                    }

                    var topDis = parseFloat(a.find(".zl-scrollBar").css("top"));

                    if (b) {

                        topDis -= settings.wheelDis;

                        if (topDis < 0) {

                            topDis = 0;

                        }

                    } else {

                        topDis += settings.wheelDis;

                        if (topDis > height) {

                            topDis = height;

                        }
                    }

                    a.find(".zl-scrollBar").get(0).style.top = topDis + "px";
                    a.find(".zl-scrollContentDiv").get(0).style.top = -(topDis * (scrollH - innerH) / height) + 'px';

                }
            };


            T.each(function () {

                var oDiv = $(this).get(0);

                if (oDiv.addEventListener) {

                    oDiv.addEventListener("DOMMouseScroll", function (ev) {

                        var ev = ev || event;
                        var $This = $(this);

                        fn(ev, $This);

                        ev.preventDefault();

                    }, false);

                }

                oDiv.onmousewheel = function (ev) {

                    var ev = ev || event;
                    var $This = $(this);

                    fn(ev, $This);

                    return false;
                };

            });

            return this;
        }

    });
})(jQuery);